export const lightTheme = {
  token: {
    colorPrimary: '#1890ff',
    colorSuccess: '#52c41a',
    colorWarning: '#faad14',
    colorError: '#f5222d',
    colorInfo: '#1890ff',
    colorBgBase: '#ffffff',
    colorBgContainer: '#ffffff',
    colorBgElevated: '#ffffff',
    colorBgLayout: '#f5f5f5',
    colorBorder: '#d9d9d9',
    colorBorderSecondary: '#f0f0f0',
    colorText: '#000000d9',
    colorTextSecondary: '#00000073',
    colorTextTertiary: '#00000040',
    colorTextQuaternary: '#00000026',
    borderRadius: 6,
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
  },
  components: {
    Layout: {
      headerBg: '#001529',
      siderBg: '#001529',
      bodyBg: '#f5f5f5',
    },
    Menu: {
      darkItemBg: '#001529',
      darkItemSelectedBg: '#1890ff',
      darkItemHoverBg: '#1890ff30',
    },
    Card: {
      headerBg: '#fafafa',
      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.09)',
    },
    Table: {
      headerBg: '#fafafa',
      rowHoverBg: '#f5f5f5',
    },
    Button: {
      borderRadius: 6,
      boxShadow: '0 2px 0 rgba(0, 0, 0, 0.045)',
    },
  },
}

export const darkTheme = {
  token: {
    colorPrimary: '#1890ff',
    colorSuccess: '#52c41a',
    colorWarning: '#faad14',
    colorError: '#f5222d',
    colorInfo: '#1890ff',
    colorBgBase: '#141414',
    colorBgContainer: '#1f1f1f',
    colorBgElevated: '#262626',
    colorBgLayout: '#000000',
    colorBorder: '#434343',
    colorBorderSecondary: '#303030',
    colorText: '#ffffffd9',
    colorTextSecondary: '#ffffff73',
    colorTextTertiary: '#ffffff40',
    colorTextQuaternary: '#ffffff26',
    borderRadius: 6,
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.45)',
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
  },
  components: {
    Layout: {
      headerBg: '#001529',
      siderBg: '#001529',
      bodyBg: '#141414',
    },
    Menu: {
      darkItemBg: '#001529',
      darkItemSelectedBg: '#1890ff',
      darkItemHoverBg: '#1890ff30',
    },
    Card: {
      headerBg: '#262626',
      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.25)',
    },
    Table: {
      headerBg: '#262626',
      rowHoverBg: '#262626',
    },
    Button: {
      borderRadius: 6,
      boxShadow: '0 2px 0 rgba(0, 0, 0, 0.145)',
    },
  },
}

export const compactTheme = {
  token: {
    sizeStep: 3,
    sizeUnit: 3,
    borderRadius: 4,
  },
}

// 主题切换 Hook
import { useState, useEffect } from 'react'

export const useTheme = () => {
  const [theme, setTheme] = useState('light')
  const [compact, setCompact] = useState(false)

  useEffect(() => {
    const savedTheme = localStorage.getItem('theme') || 'light'
    const savedCompact = localStorage.getItem('compact') === 'true'
    setTheme(savedTheme)
    setCompact(savedCompact)
  }, [])

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light'
    setTheme(newTheme)
    localStorage.setItem('theme', newTheme)
  }

  const toggleCompact = () => {
    const newCompact = !compact
    setCompact(newCompact)
    localStorage.setItem('compact', newCompact.toString())
  }

  const getCurrentTheme = () => {
    const baseTheme = theme === 'light' ? lightTheme : darkTheme
    return compact ? { ...baseTheme, ...compactTheme } : baseTheme
  }

  return {
    theme,
    compact,
    toggleTheme,
    toggleCompact,
    getCurrentTheme,
  }
}